<template>
    <a-card :bordered="false" style="margin-bottom: 10px">
        <a-form ref="searchFormRef" name="advanced_search" class="ant-advanced-search-form" :model="searchFormState">
            <a-row :gutter="24">
                <a-col :span="8">
                    <a-form-item name="车间编码" label="编码">
                        <a-input v-model:value="searchFormState.code" placeholder="请输入编码"
                            @keyup.enter="table.refresh(true)"></a-input>
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item label="车间名称:" name="category">
                        <a-input v-model:value="searchFormState.name" placeholder="请输入车间名称"
                            @keyup.enter="table.refresh(true)"></a-input>
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-button type="primary" @click="table.refresh(true)">
                        <template #icon>
                            <SearchOutlined />
                        </template>
                        查询
                    </a-button>
                    <a-button class="buttom-left" @click="() => searchFormRef.resetFields()">
                        <template #icon><redo-outlined /></template>
                        重置
                    </a-button>
                    <data-export buttonName="导出用户" @dataExport="dataExportUser" />
                </a-col>
            </a-row>
        </a-form>
    </a-card>
    <a-card :bordered="false">
        <s-table ref="table" table-id="DEV_MESSAGE_TABLE" :columns="columns" :data="loadData"
            :expand-row-by-click="true" :alert="options.alert.show" bordered :row-key="(record) => record.id"
            :tool-config="toolConfig" :row-selection="options.rowSelection">
            <template #operator>
                <a-space>
                    <a-button type="primary" @click="form.onOpen()"> 添加 </a-button>
                    <batch-delete title="确定要删除吗?" buttonName="批量删除" :selectedRowKeys="selectedRowKeys"
                        @batchDelete="deleteBatchEmail" />
                </a-space>
            </template>
            <template #bodyCell="{ column, record, text }">
                <template v-if="column?.dataIndex === 'category'">
                    {{ $TOOL.dictTypeData('MESSAGE_CATEGORY', text) }}
                </template>
                <template v-if="column?.dataIndex === 'action'">
                    <a @click="detailRef.onOpen(record)">详情</a>
                    <a-divider type="vertical" />
                    <a-popconfirm title="是否确认删除？" @confirm="deleteMessage(record)">
                        <a-button type="link" danger size="small">删除</a-button>
                    </a-popconfirm>
                </template>
            </template>
        </s-table>
    </a-card>
    <Form ref="form" @successful="table.refresh(true)" />
    <detail ref="detailRef" />
</template>

<script setup name="devMessage">
import jinte_itemapi from '@/api/mes/basicdata/jinte_itemapi'
import Form from './form.vue'
import detail from './detail.vue'
import tool from '@/utils/tool'
import { ref, reactive } from 'vue'
import jindesapi from '@/api/mes/basicdata/jindesapi'

const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false };
const columns = [
    {
        title: '编码',
        dataIndex: 'code',
        ellipsis: true
    },
    {
        title: '名称',
        dataIndex: 'name',
        ellipsis: true
    },
    {
        title: '描述',
        dataIndex: 'description',
        ellipsis: true
    },
    {
        title: '检验类型',
        dataIndex: 'jindes',
        ellipsis: true
    },
    {
        title: '作业方式',
        dataIndex: 'operation',
        ellipsis: true
    },
    {
        title: '标量值',
        dataIndex: 'bend',
        ellipsis: true
    },
    {
        title: '单位',
        dataIndex: 'mark',
        ellipsis: true
    },
    {
        title: '上限值',
        dataIndex: 'sond',
        ellipsis: true
    },
    {
        title: '下限值',
        dataIndex: 'xond',
        ellipsis: true
    },
    {
        title: '描述',
        dataIndex: 'description',
        ellipsis: true
    },
    {
        title: '创建人',
        dataIndex: 'createUser'
    },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        ellipsis: true
    },
    {
        title: '更新时间',
        dataIndex: 'updateTime',
        ellipsis: true
    },
    {
        title: '操作',
        dataIndex: 'action',
        align: 'center',
        width: '150px'
    }
];

let selectedRowKeys = ref([]);
// 列表选择配置
const options = reactive({
    alert: {
        show: true, //显示选择多少个
        clear: () => {
            selectedRowKeys.value = [];
        }
    },
    rowSelection: {
        onChange: (selectedRowKey, selectedRows) => {
            selectedRowKeys.value = selectedRowKey;
        }
    }
});

// 定义tableDOM
const table = ref(null);
const form = ref();
const searchFormRef = ref();
let searchFormState = reactive({});
const detailRef = ref();

// 表格查询 返回 Promise 对象
const loadData = (parameter) => {
    return jinte_itemapi.jindes_itemlist(Object.assign(parameter, searchFormState)).then((data) => {
        return data;
    });
};

// 删除
const deleteMessage = (record) => {
    let params = [
        {
            id: record.id
        }
    ];
    jinte_itemapi.jindes_itemDelete(params).then(() => {
        table.value.refresh(true);
    });
};

// 批量删除
const deleteBatchEmail = (params, callback) => {
    jinte_itemapi
        .jindes_itemDelete(params)
        .then(() => { })
        .finally(() => {
            table.value.clearRefreshSelected();
            callback(); //调用组件中的回调方法
        });
};

// 站内信分类字典
const categoryOptions = tool.dictList('MESSAGE_CATEGORY');
</script>

<style scoped>
.ant-form-item {
    margin-bottom: 0 !important;
}

.buttom-left {
    margin-left: 8px;
}
</style>
